<script setup>
import { reactive, toRef } from 'vue';

// 创建一个响应式对象
let person = reactive({
    name: "abcque",
    gender: "M",
    age: 18,
})

setInterval(
    () => {
        // 访问响应式对象可以直接访问属性
        person.age = person.age + 1
    },
    1000);

    // 将响应式对象转成响应式变量
let name = toRef(person, "name")
let gender = toRef(person, "gender")
let age = toRef(person, "age")

</script>

<template>
    <!-- <h1>姓名:{{ person.name }}</h1>
    <h1>性别:{{ person.gender }}</h1>
    <h1>年龄:{{ person.age }}</h1> -->
    <h1>姓名:{{ name }}</h1>
    <h1>性别:{{ gender }}</h1>
    <h1>年龄:{{ age }}</h1>
</template>

<style scoped></style>